<script setup>
import {reactive, defineEmits} from 'vue';
import {useApi} from "@/composables/useApi.js";
import showToast from "@/components/toast/index.js";
import {getGradeListAll} from "@/api/standard.js";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  buttonText: {
    type: String,
    required: true,
  },
})
let emit = defineEmits(['onChange', 'onHandle', 'changeId'])

const inputValue = ref('')
const form = reactive({
  // eslint-disable-next-line camelcase
  student_id: '',
  student_name: '',
  grade_id: null,
  class_id: null

})
let sexList = ref(['男', '女'])
const inputTypeStatus = ref(false)//自定义下拉框是展示开始隐藏
const inputType = ref(1)//输入框筛选  1姓名  2ID
const inputTypeSelect = reactive([{value: 1, label: '姓名'}, {value: 2, label: 'ID'}])

//判断下拉框是显示还是隐藏
const handleVisibleChange = e => {
  inputTypeStatus.value = !inputTypeStatus.value
}
// 删除回调
const onHandle = (type) => {
  emit('onHandle', type)
}
const search = () => {
  let inputValue = form.inputValue
  if (inputType.value == 1) {
    form.student_name = inputValue
    form.student_id = ''
  } else {
    form.student_name = ''
    form.student_id = inputValue
  }
  showFlag.value = false
  emit('onChange', form)
}
const reset = () => {
  form.grade_id = null
  form.class_id = null
  emit('onChange', form)
}
const showFlag = ref(false)


/** 场次列表*/
const sessionList = ref([])
const sessionValue = ref()

const getSessionList = async () => {
  const {data} = await useApi('/admin/Api.Examcourse/index').post({page: 1, limit: 99999, type: 2})
  sessionList.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.examcourse_id
    }
  })
  sessionValue.value = sessionList.value[0].examcourse_id
  emit('changeId', {id:sessionValue.value,title:sessionList.value[0].title})
}
getSessionList()
/** 获取场次列表结束*/

/** 场次下拉框切换或掉*/
const changeId = (val) => {
  console.log(val)
  sessionValue.value = val
  let item = sessionList.value.find(item=>item.examcourse_id ===val)
  emit('changeId', {id:sessionValue.value,title:item.title})
}
/** 获取年级列表开始*/
const gradeList = ref([])
getGradeListAll().then(res => {
  gradeList.value = res.data
})
/** 获取年级列表结束*/
/** 获取班级列表开始*/
const classList = ref([])
const getClassList = async (id = '') => {
  console.log(id, 'id')
  console.log(form.grade_id)
  const {data} = await useApi('/admin/Api.GradeClass/indexList').post({grade_id: id})
  if (data.value.status == 200) {
    console.log(data.value.data)
    classList.value = data.value.data
  }
}
/** 获取班级列表结束*/
const gradeChange = (id) => {
  console.log(id)
  if (id != form.grade_id) {
    form.class_id = null
  }
  getClassList(id)
}

const changeShowFlag = () => {
  showFlag.value = !showFlag.value
  console.log(showFlag.value)
}
const router = useRouter()

const goDetail = (item) => {
  console.log(item)
  router.push(`/platform/qualitySecondList?id=${item.id}&times=${item.times}&name=${'马超'}`)

}
</script>

<template>
  <v-list class="header_box">
<!--    <div @click="goDetail({id:1,times:2})">二页</div>-->

    <div class="head">
      <div class="heads">
        <div class="head_title">
          {{ props.title }}
        </div>
        <div class="search">
          <div style="position: relative;">
            <div class="select">
              {{ inputType == 1 ? '姓名' : 'ID' }}
              <i
                v-if="inputTypeStatus"
                class="ri-arrow-up-s-line"
                style="block-size: 16px;inline-size: 16px;margin-inline-start: 5px;"
              />
              <i
                v-if="!inputTypeStatus"
                class="ri-arrow-down-s-line"
                style="block-size: 16px;inline-size: 16px;margin-inline-start: 5px;"
              />
            </div>
            <VSelect
              v-model="inputType"
              :items="inputTypeSelect"
              item-title="label"
              item-value="value"
              label="Standard"
              placeholder="Select Item"
              style="position: absolute;inset-block-start: 0;inset-inline-start: 0;opacity: 0;"
              eager
              @click="handleVisibleChange"
            />
          </div>
          <VTextField
            v-model="form.inputValue"
            single-line
            placeholder="搜索"
            variant="plain"
            max-width="180px"
            style="block-size: 27px;margin-block-start: -36px;margin-inline-start: 10px;"
          />

          <i
            @click="search"
            class="ri-search-line cursor-pointer"
            style="block-size: 18px;inline-size: 18px;margin-inline-start: auto;"
          />
        </div>
        <div class="select-btn">
          <el-select
            class="ml-6"
            @change="changeId"
            v-model="sessionValue"
            clearable
            popper-class="mySelectStyle"
            filterable
            style="width: 240px;"
            :teleported="false"
          >
            <el-option
              v-for="item in sessionList"
              :key="item.examcourse_id"
              :label="item.title"
              :value="item.examcourse_id"
            />
          </el-select>
        </div>
        <div @click="onHandle('openSecondPage')" class="examination-session border-radius-md">
          考试场次管理
        </div>
        <div class="right">
          <IconBtn size="small" style="position: relative">
            <i
              class="ri-filter-3-line cursor-pointer"
              style="block-size: 24px;inline-size: 24px;"
              @click="changeShowFlag"
            />
          </IconBtn>
<!--          <i-->
<!--            class="ri-delete-bin-5-line cursor-pointer"-->
<!--            style="block-size: 24px;inline-size: 24px;margin-inline-start: 24px;"-->
<!--            @click="onHandle('delete')"-->
<!--          />-->
<!--          <VBtn-->
<!--            color="primary"-->
<!--            style="margin-inline-start: 24px;"-->
<!--            @click="onHandle('add')"-->
<!--          >-->
<!--            {{ buttonText }}-->
<!--          </VBtn>-->
        </div>
      </div>
    </div>
  </v-list>
  <div class="menu-box" v-if="showFlag">
    <VList style="width: 310px!important;">
      <VListItem>
        <template #prepend>
          <VSelect
            :items="gradeList"
            @update:modelValue="gradeChange"
            v-model="form.grade_id"
            item-title="title"
            item-value="grade_id"
            label="年级"
            class="input-width-height"
          />
        </template>
      </VListItem>
      <VListItem>
        <template #prepend>
          <VSelect
            v-model="form.class_id"
            :disabled="form.grade_id == ''"
            :items="classList"
            item-title="title"
            item-value="class_id"
            label="班级"
            class="input-width-height"
          />
        </template>
      </VListItem>
      <VListItem style="display: flex;justify-content: end">

        <VBtn
          color="primary"
          class="me-4"
          @click="search"

        >
          搜索
        </VBtn>
        <VBtn
          type="submit"
          color="primary"
          @click="reset"
        >
          重置
        </VBtn>
      </VListItem>
    </VList>
  </div>

</template>

<style lang="scss" scoped>
@use "@configured-variables" as variables;

:deep(.select-btn) {
  .el-select__wrapper {
    background-color: rgb(var(--v-theme-background));
    height: 39px;
    border: none;
    box-shadow: unset;
  }
}


//下拉框背景色
.el-popper.is-light.mySelectStyle {
  background-color: rgba(0, 136, 255, 0.1) !important;
  border: 1px solid #254277 !important;
}
//下拉框的链接小方块
.mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
  border: 1px solid #254277 !important;
}
.mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
  background: #254277 !important;
  border: 1px solid #254277 !important;
}
//鼠标移动上去的选中色
.mySelectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    //background: #ece4ff !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    //color:var(--v-secondary) !important;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    //background: #ece4ff !important;
  }
}
.menu-box {
  border-radius: 6px;
  position: absolute;
  top: 150px;
  right: 25px;
  width: 310px;
  background-color: #fff;
  z-index: 999;
}

.input-width-height {
  width: 280px !important;
}

.v-picker-title {
  display: none !important;
}

.examination-session {
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-grey-100));
  background: rgba(var(--v-theme-button-grey-bg));

}

.right {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}

.select {
  z-index: 1;
  display: flex;
  align-items: center;
  color: #151619;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;

}

.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
      background-color: variables.$vertical-nav-background-color;

    }
  }
}

.header_box {
  padding: 0px;
  overflow: visible;
}
::v-deep(.el-select__wrapper),
::v-deep(.el-select-dropdown){
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-popper.is-light .el-popper__arrow::before) {
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-select__wrapper){
  background-color: rgb(var(--v-theme-surface));
}
::v-deep(.el-select-dropdown__item){
  color: rgb(140, 87, 255);
}
</style>
